<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :sm="20">
      <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">
        <div slot="header" class="total blog-info">
          <div class="blog-views">
            <i class="el-icon-pie-chart"></i>
            <span class="header">  {{ blog.studentName }}</span>
          </div>
          <div class="blog-views" style="margin-left: 20px">
            <i class="el-icon-date"></i>
            <span>  {{ blog.createTime }}</span>
          </div>
          <div class="blog-views" style="margin-left: 20px">
            <i class="el-icon-view"></i>
            <span>  {{ blog.views }}</span>
          </div>
          <div class="blog-views" style="margin-left: 20px">
            <i class="el-icon-user"></i>
            创建人
            <span>  {{ blog.createBy }}</span>
          </div>

          <div class="blog-views" style="margin-left: 20px">
            <i class="el-icon-s-flag"></i>
            <span>  {{ parseTagName(blog.tags) }}</span>
          </div>

          <div class="blog-views" style="margin-left: 20px">
            内部编号
            <span>  {{ blog.id }}</span>
          </div>

          <div style="position: absolute;right: 20px">
            <button @click="getBlogInfo(lastPage)" type="primary" style="margin-right: 20px">上一篇</button>
            <button @click="getBlogInfo(nextPage)" type="primary">下一篇</button>
          </div>
        </div>
        <h2 class="blog-title header">{{ blog.title }}
          <el-tag size="mini" v-for="tag in blog.types" :key="tag.typeId" type="info">{{ tag.typeName }}</el-tag>
        </h2>

        <el-row :gutter="20" :span="24" type="flex" align="stretch">
          <el-col :span="12">
            <el-input type="textarea" autosize readonly show-word-limit
                      style="min-width: 500px;"
                      v-model="computedValue">
            </el-input>

            <el-table :data="blog.blogFilesNew" :border="true" style="width: 99.99%;margin-top: 30px">
              <el-table-column align="center" min-width="30%" prop="remark" label="附件">
                <template slot-scope="scope">
                  <el-row>
                    <el-col :span="6">
                      <div class="blogFilesInfoName">名称：</div>
                    </el-col>
                    <el-col :span="18">
                      <el-input v-model="scope.row.fileOriginName" disabled/>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 4px;">
                    <el-col :span="6">
                      <div class="blogFilesInfoName">大小：</div>
                    </el-col>
                    <el-col :span="18">
                      <el-input v-model="scope.row.fileSize" disabled/>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 4px;">
                    <el-col :span="6">
                      <div class="blogFilesInfoName">类型：</div>
                    </el-col>
                    <el-col :span="18">
                      <el-input v-model="scope.row.fileSuffix" disabled/>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="50%" prop="remark" label="备注">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remark" type="textarea" :rows="6" size="small" disabled/>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="20%" label="附件操作">
                <template slot-scope="scope">
                  <el-button size="mini" plain @click="handleDownload(scope.row)">下载</el-button>
                  <el-button size="mini" plain @click="handlePreview(scope.row)">预览</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>

          <el-col :span="12">
            <el-card shadow="never" style="min-height: 300px">
              <div class="header">
                评论
              </div>
              <comment ref="childRef"></comment>
            </el-card>
          </el-col>
        </el-row>

        <div class="appreciate">
          <el-popover
            placement="top"
            title="提示"
            width="240"
            trigger="hover"
            content="将此项目标识为已处理完成"
          >
            <el-button
              v-hasPermi="['cms:state:finish']"
              :disabled="buttonEnabled"
              slot="reference" type="success" @click="buttonClickEvent(1)" round plain>标识为已完成
            </el-button>
          </el-popover>

          <el-button style="margin-left: 20px" v-hasPermi="['cms:state:finish']" :disabled="buttonEnabled"
            type="success" @click="callChildMethod" round plain>完成(自动评论)
          </el-button>

          <el-popover
            placement="top"
            style="margin-left: 20px"

            title="提示"
            width="240"
            trigger="hover"
            content="已完成的项目不可更改"
          >
            <el-button
              v-hasPermi="['cms:state:continue']"
              :disabled="buttonEnabled"
              slot="reference" type="primary" @click="buttonClickEvent(3)" round plain>需二次沟通
            </el-button>
          </el-popover>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    <!-- 设置底部距离的 -->
    <el-backtop :bottom="60">
      <div
        style="
            height: 50px;
            width: 50px;
            background-color: rgba(240,239,241,1);
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            border-radius:2px;
            color: #1989fa;
          "
      >
        <svg-icon icon-class="top"/>
      </div>
    </el-backtop>
  </el-row>
</template>

<script>
//使用prism.js代码高亮
import '@/views/cms/plugins/prism.js'
import '@/views/cms/plugins/prism.css'
import comment from '../../comment/components/Ipcomment.vue'
import {addBlogViews, getBlogDetail, updateState} from '@/api/cms/blog'
import {mapState} from 'vuex'

export default {
  components: {
    comment,
  },
  data() {
    return {
      blog: {},
      buttonEnabled: true,
      lastPage: parseInt(this.$route.query.id) - 1,
      nextPage: parseInt(this.$route.query.id) + 1,
      state: this.$route.query.finishState,
      commentForm: {
        content: ''
      }
    }
  },
  watch: {
    '$route'(to, from) {
      this.$router.go(0)
    }
  },
  created() {
    this.getBlogInformation()
  },
  computed: {
    ...mapState([
      'userInfo',
      'administrator'
    ]),
    // 计算属性：根据条件返回对应的绑定变量
    computedValue: {
      get() {
        // 取值时，返回当前条件对应的变量值
        return this.blog.contentType === '1'? this.blog.content:this.blog.content2
      }
    }
  },
  methods: {
    // 获取内部沟通详情信息
    async getBlogInformation() {

      let id = this.$route.query.id;
      getBlogDetail(id).then(response => {
        if (response.data === ''){
          this.$modal.msgWarning("编号为" + id + "的信息不存在")
          return
        }
        this.buttonEnabled = response.data.finishState === 1
        this.blog = response.data

        // console.log(this.blog)

        if (this.blog.contentType === '2') {

          let content = this.blog.content
          let jsonData = JSON.parse(content);
          let classTime = jsonData.class_time
          let classTimeString = ''
          classTime.forEach(item => {
            classTimeString += item.time + ','
          })
          // console.log(jsonData)
          this.blog.content2 =
            '(1) 校区:' + this.blog.studentName + '\n' +
            '(2) 班级类型:' + jsonData.class_type + '\n' +
            '(3) 班级编号:' + jsonData.class_number + '\n' +
            '(4) 学员程度:' + jsonData.student_status + '\n' +
            '(5) 系统中是否已经建立班级:' + jsonData.yesNo + '\n' +
            '(6) 特别提示:' + jsonData.tips + '\n' +
            '(7) 需要排课节数:' + jsonData.class_time.length + '\n' +
            '(8) 排课时间:' + classTimeString.substring(0,classTimeString.length -1) + '\n' +
            '(9) 其他信息备注:' + jsonData.other + '\n' +
            ''
        }

        // console.log(this.blog)
        this.blog.blogFilesNew = []
        if (response.data.blogFiles !== null) {
          this.blog.blogFilesNew = JSON.parse(response.data.blogFiles)
        }

        // 增加阅读量
        addBlogViews(id)
      })

    },
    buttonClickEvent(type) {
      // console.log("正在处理中")
      let form = {}
      form.id = this.$route.query.id
      form.finishState = type
      // console.log(form)
      this.$modal.confirm('是否确认处理？').then(() => {
        // updateBlogState(id,type)
        updateState(form)
      }).then(() => {
        this.$modal.msgSuccess('处理成功')
      }).catch(() => {
        this.$modal.msg('取消处理')
      })
    },
    parseTagName(row){
      if (row === undefined){
        return '未知'
      }
      return row[0]['tagName']
    },
    callChildMethod() {
      // console.log(form)
      this.$modal.confirm('是否确认处理？').then(() => {
        let form = {}
        form.id = this.$route.query.id
        form.finishState = 1
        updateState(form)
        // 1. 获取子组件实例
        const childInstance = this.$refs.childRef;
        // 2. 调用子组件方法（可传参）
        childInstance.parentCall(0);
        // 3. 若方法有返回值，可直接接收
      }).then(() => {
        this.$modal.msgSuccess('处理成功')
      }).catch(() => {
        this.$modal.msg('取消处理')
      })
    },
    // 文件下载处理
    handleDownload(row) {
      var name = row.fileOriginName
      var url = row.filePath
      var suffix = url.substring(url.lastIndexOf('.'), url.length)
      const a = document.createElement('a')
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', process.env.VUE_APP_BASE_API + url)
      a.click()
    },
    // 文件预览处理
    async handlePreview(row) {
      var name = row.fileOriginName
      var filePath = row.filePath
      var url = process.env.VUE_APP_BASE_API + filePath
      const response = await fetch(url)
      if (response.status === 200) {
        const blob = await response.blob()
        var objectURL = window.URL.createObjectURL(blob)
        var openUrl = window.location.origin + '/fileViewer/index.html' + '?name=' + name + '&url=' + objectURL
        window.open(openUrl)
      } else {
        this.$message.error('文件不存在！')
      }
    },
    // 跳转到内部沟通详情页
    getBlogInfo(blogId) {
      let routeUrl = this.$router.resolve({
        path: '/cms/main/blog',
        query: {
          id: blogId
        }
      })
      // window.open(routeUrl.href, '_blank')
      window.open(routeUrl.href, '_self')
    },
  }
}
</script>

<style scoped>

.inputClass ::v-deep .el-textarea__inner {
  text-align: center;
}

.first-card {
  border-radius: 10px 10px 10px 10px;
  position: relative;
  padding-bottom: 10px;
  /*text-align: center;*/
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

hr.style-one {
  width: 100%;
  background-image: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 0.75), rgba(64, 158, 255, 0));
}

.appreciate {
  margin-top: 20px;
  text-align: center;
}

.comments {
  margin-top: 50px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  border: 1px solid rgba(34, 36, 38, .15);
  border-top: 2px solid #409EFF;
  text-align: left;
}

.blog-title {
  text-align: center;
}

.blog-info {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .4);
  font-size: 13px;
}

.blog-views {
  margin-right: 5px;
  float: right;
  color: black;
}

.header {
  color: #3a8ee6;
  font-weight: bold;
}

.blogFilesInfoName {
  text-align: center;
  padding-top: 5px;
}
</style>
